<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<div id="app">
    <!--vue 模板语法{{}}双大括号插值法  react{}-->
    <h2>{{ msg }}</h2>
    <h3>{{1+1}}</h3>
    <h4>{{isTrue}}</h4>
    <h1>{{ str.split('').reverse().join('') }}</h1>
    <h2>{{ 1>2 ? '真的':'假的'}}</h2>
    <h3>{{'我和我的祖国,一刻也不能分割,无论我走到哪里,都流出一首赞歌'}}</h3>

    <h3>{{ {name:'度丫丫'} }}</h3>
</div>

<!--1.引包-->
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>

<script type="text/javascript">

//2. 创建实例化对象
//如果template中定义了内容，那么优先加载template ,如果没有定义内容那么加载的是#app的模板
new Vue({
  el:'#app', //目的地
  data: {
      //数据属性
      //既可以是一个对象，也可以是一个函数
      msg:'黄瓜',
      isTrue: 1==1 ,
      str:'I Love LuoNa'

  },
  //template:'<div>{{msg}}</div>'
  //template:''
});

</script>


</body>

</html>